<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米账号-登入</title>
        <style type="text/css">
            .logo{
                width: 1130px;height: 98px;margin: 0 auto;
            }
            .wrapper{
                background-image: url("bg.jpg");
                margin :0px auto;
                width: 1308px;height: 588px;
                background-position: -600px 0;background-repeat: no-repeat;
                padding-top: 56px;
            }
            .register{
                width: 410px;height: 550px;margin-top: -606px;margin-left: 850px;background-color: white;;
            }
            .title{width: 410px;height: 82px;padding-top:27px;
            }
            .accout {
                width: 205px;text-align: center;
                height: 27px;
                font-size: 24px;
                color:darkorange;border-right: 1px solid gainsboro;text-decoration:none;
            }
            .code{  width: 205px;text-align: center;
                height: 27px;
                font-size: 24px;margin-top: -27px;
                color:grey;float: right;}
            .button{text-align: center;}
            .but1{
                width: 346px;height: 48px;opacity: 0.7;
            }
            .but2{width: 346px;height: 48px;display: block;margin-top: 20px;margin-left: 30px;opacity: 0.7}
            .but3{width: 348px;height: 50px;background-color: #e47c00;color: white;display: block;margin-top: 20px;margin-left: 30px;
            font-size: 16px;outline: none;}
            a:link{text-decoration: none}
            .other{width: 348px;height: 50px;margin-left: 30px;}
            .phone-register{
                color: darkorange;font-size: 14px;display:block;margin-top: 10px;
            }
            .reg1{width: 56px;height: 16px;float: left;font-size: 14px;border-right: 1px solid #d0d0d0;margin-top:-20px;margin-left: 210px;padding-right: 5px}
            .reg2{width: 56px;height: 16px;float: left;font-size: 14px;margin-top: -13px;margin-left: 278px;margin-top: -20px}
            .lable{    border-top: 1px solid #e0e0e0;border-right: none;border-left: none;border-bottom: none;margin-top: 60px;
            font-size: 14px;color: #cdcdcd
            }
            .icon{width: 348px;height: 36px;margin: 0 auto}
            .icon1{border-radius: 50% 50%;cursor: pointer;position: absolute;
            height: 40px;width: 40px;background-image: url("qq.png");margin-left: 50px;background-repeat: no-repeat}
            .icon2{border-radius: 50% 50%;position: absolute;cursor: pointer;
                height: 40px;width: 40px;background-image: url("weibo.png");float: left;margin-left: 120px;margin-top: 4px;}
            .icon3{border-radius: 50% 50%;position: absolute;cursor: pointer;
                height: 40px;width: 40px;background-image: url("zhi.png");float: left;margin-left: 190px;margin-top: 4px;}
            .icon4{border-radius: 50% 50%;position: absolute;cursor: pointer;
                height: 40px;width: 40px;background-image: url("wechat.png");float: left;margin-left: 260px;margin-top: 4px}
              .tips{
                width: 60px;height: 15px;border: 1px solid black;font-size: 12px;text-align: center;margin-top: 40px;margin-left: 10px;display: none;
                  ;
            }
            .icon1 .tips{width: 60px;height: 15px;border: 1px solid black;font-size: 12px;text-align: center;margin-top: 45px;margin-left: 10px;display: none}
            .icon1:hover .tips{display: block;}
            .icon2:hover .tips{display: block;}
            .icon3:hover .tips{display: block;}
            .icon4:hover .tips{display: block;}
        </style>
    </head>
    <body>
        <div class="logo">
            <img src="logo.png">
        </div>
            <a href="">
                <div class="wrapper">
                </div>
            </a>
                    <div class="register">
                        <div class="title">
                            <div class="accout">帐号登入</div>
                            <div class="code">扫码登入</div>
                        </div>
                               <div class="button">
                                   <input type="text" placeholder="&nbsp;&nbsp;&nbsp;邮箱/手机号码/小米ID" class="but1">

                                   <input type="text" placeholder="&nbsp;&nbsp;&nbsp;密码" class="but2">
                                   <input type="submit" value="登录"  class="but3">
                               </div>
                                    <div class="other">
                                        <div class="phone-register">手机短信登入/注册</div>
                                        <div class="reg1">立即注册</div>
                                        <div class="reg2">忘记密码</div>
                                    </div>
                                            <fieldset class="lable">
                                                <legend align="center" class="oth_type_txt">其他方式登录</legend>
                                            </fieldset>
                                                    <div class="icon">
                                                        <div class="icon1">
                                                            <div class="tips">QQ登入</div>
                                                        </div>
                                                        <div class="icon2"> <div class="tips">微博登入</div></div>
                                                        <div class="icon3"> <div class="tips">支付宝登入</div></div>
                                                        <div class="icon4"> <div class="tips">微信登入</div></div>
                                                    </div>
                    </div>

    </body>
</html>